@(listGroup: java.util.List[models.Group], listUser: java.util.List[models.User], groupForm: Form[models.forms.GroupForm], title: String, message: String)

@main(title, message) {
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 form-group">
			<div class="btn-group btn-actions" style="margin-bottom: 10px;">
				<a class="btn btn-default btn-sm" href="javascript:;"data-toggle="modal" data-target="#addGroup">
					<i class="glyphicon glyphicon-asterisk"></i>
				</a>
				<a class="btn btn-default btn-sm" href="javascript:;"data-toggle="modal" data-target="#myModal">
					<i class="glyphicon glyphicon-pencil"></i>
				</a>
				<a class="btn btn-default btn-sm" href="javascript:;"data-toggle="modal" data-target="#myModal">
					<span class="glyphicon glyphicon-remove"></span>
				</a>
			</div>
			<br/>
			<div>
				<table class="table table-bordered table-condensed">
					<tr>
						<th class="text-center" width="3%">#</th>
						<th width="57%">Group name</th>
						<th width="20%">Status</th>
						<th width="10%">Members</th>
						<th width="10%">Actions</th>
					</tr>
					 @for((group, index) <- listGroup.zipWithIndex) {
						<tr>
							<td class="text-center">@(index+1)</td>
							<td>@group.getName()</td>
							<td></td>
							<td>@{if(group.getUsers() != null) {group.getUsers().size()}else{0}}</td>
							<td></td>
						</tr>
					}
				</table>
			</div>
			<button type="submit" class="btn btn-default">Save</button>
		</div>
	</div>
</div>


<!-- Modal -->
<div class="modal fade" id="addGroup" tabindex="-1" role="dialog" aria-labelledby="addGroupLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title" id="addGroupLabel">Add new group</h4>
			</div>
			<form action="@routes.Admin.groups(0)" method="post" accept-charset="UTF-8">
				<div class="modal-body">
					<div class="form-group">
						<label for="groupName">Group's name</label>
						<input type="text" class="form-control" id="groupName" name="groupName" placeholder="Group's name">
					</div>
					<div class="checkbox">
						<label> <input type="checkbox" name="isPrivate"> Is private group?
						</label>
					</div>
					<div class="row">
						<div class="panel panel-primary">
							<div class="panel-heading">User's pick list</div>
							<div class="panel-body">
								<div class="col-sm-5">
						          <div class="list-group" id="list1">
							          <a href="javascript:;" class="list-group-item active">User's list <input title="toggle all" class="all pull-right" type="checkbox"></a>
							          @for((user, index) <- listUser.zipWithIndex) {
							          	<a href="javascript:;" class="list-group-item">
							          		@user.getFullName() <input data-target="@user.getId()" class="pull-right" type="checkbox">
						          		</a>
									  }
						          </div>
						        </div>
						        <div class="col-md-2 v-center">
						     		<button type="button" title="Send to list 2" class="btn btn-default center-block add"><i class="glyphicon glyphicon-chevron-right"></i></button>
						            <button type="button" title="Send to list 1" class="btn btn-default center-block remove"><i class="glyphicon glyphicon-chevron-left"></i></button>
						        </div>
						        <div class="col-sm-5">
						    	  <div class="list-group" id="list2">
							          <a href="javascript:;" class="list-group-item active">In group <input title="toggle all" class="all pull-right" type="checkbox"></a>
						          </div>
						        </div>
						        <div id="list-hidden" style="width:0;height:0;visibility: hidden;">
						        	@for((user, index) <- listUser.zipWithIndex) {
						        		<input type="checkbox" value="@user.getId()" id="@user.getId()" name="groupUsers[]"/>
								    }
						        </div>
							</div>
						</div>
				  </div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save changes</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script src="@routes.Assets.at("javascripts/groups.js")" type="text/javascript"></script>
}